<template>
<!--  <div class="home-card-item flex" :style="{backgroundColor: v.bgColor}">-->
  <div class="home-card-item flex">
<!--    <div class="flex-margin flex w100" :class="` home-one-animation${k}`">-->
<!--      <div class="flex-auto">-->
<!--        <span class="font30">{{ v.num1 }}</span>-->
<!--        <div class="mt10">{{ v.num3 }}</div>-->
<!--      </div>-->
<!--      <div class="home-card-item-icon flex" :style="{backgroundColor: v.color2}">-->
<!--        <i class="flex-margin" :class="v.num4"-->
<!--           :style="{ color: `var(${v.color3})` ,fontSize: '40px'}"></i>-->
<!--      </div>-->
<!--    </div>-->
    xxxxxxxxxx
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs} from "vue/dist/vue";

export default defineComponent({
  name: 'docProjectCountWidget',
  setup() {
    const state = reactive({
      queryParams: {
        keywords: "",
        pageNum: 1,
        pageSize: 20,
      },
      logs: [],
      total: 0,
    });
    return {
      ...toRefs(state),
    };
  }
});
</script>

<style scoped lang="scss">
.home-card-item {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  transition: all ease 0.3s;
  padding: 20px;
  overflow: hidden;
  background: var(--el-color-white);
  color: var(--el-text-color-primary);
  border: 1px solid var(--next-border-color-light);

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }

  &-icon {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    flex-shrink: 1;
    font-size: 40px;

    i {
      color: var(--el-text-color-placeholder);
    }
  }

  &-title {
    font-size: 15px;
    font-weight: bold;
    height: 30px;
  }
}
</style>